<template>
  <div>
    <sub-title :subTitle="'支付证书'" :isRefresh="false"></sub-title>
    <div class="body">
      <el-form ref="ruleForm" label-width="100px" class="form">
        <el-form-item label="支付证书: ">
          <div class="upload-btn-wrap">
            <label for="upload"><el-button size="small" type="primary">{{ fileName ? '重新上传' : '上传证书' }}</el-button></label>
            <input @change="uploadCredentials" id="upload" type="file" class="upload-input">
          </div>
          <p>{{ fileName }}</p>
          <p class="form-tips">只能上传p12证书文件</p>
          <img src="@/assets/wechat-merchant.png" alt="" width="800">
          <p class="credential-tips">转入微信商户平台 <a href="https://pay.weixin.qq.com" target="_blank">请点击</a></p>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import subTitle from "@/components/subTitle"
  export default {
    name: "credential",
    components: {
      subTitle,
    },
    computed: {
      userInfo(){
        return this.$store.getters.userInfo;
      }
    },
    data(){
      return{
        fileName: '',
      }
    },
    mounted(){
      this.getCredentials();
    },
    methods: {
      getCredentials(){
        this.$http.post("merchant_pay_mode/query", {
          merchantId: JSON.parse(this.userInfo).merchantId
        }).then((res) => {
          this.fileName = res.remark1.split('/').pop();
        })
      },
      uploadCredentials(files){
        let file = files.target.files;
        if (file.length > 0){
          if (file[0].name.split('.').pop() != 'p12'){
            this.$msgWar("请上传p12证书文件");
            return
          }else {
            let formData = new FormData();
            formData.append('files', file[0]);
            formData.append('merchantId', JSON.parse(this.userInfo).merchantId);
            this.$http.post("file/file_upload", formData,{
              type: 'form',
              file: 'image'
            }).then(() => {
              this.$msgSuc("上传成功");
              this.getCredentials();
            })
          }
        }
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "~@/assets/css/common";
  .form-tips{
    font-size: 12px;
    color: $gray;
    line-height: 16px;
    margin: 10px 0;
  }
  .credential-tips{
    line-height: 1;
    a{
      color: $green;
      text-decoration: underline;
    }
  }
</style>